<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no" />

		<title></title>

		<link rel="stylesheet" type="text/css" href="bootstrap-4.5.0/dist/css/bootstrap.css" />

		<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.css" />

		<link rel="stylesheet" type="text/css" href="css/shop_details.css" />

		<script src="js/jquery-3.5.1.slim.min.js" type="text/javascript" charset="utf-8"></script>

		<script src="bootstrap-4.5.0/dist/js/bootstrap.bundle.min.js" type="text/javascript" charset="utf-8"></script>

		<script src="js/popper.js" type="text/javascript" charset="utf-8"></script>

		<script src="bootstrap-4.5.0/dist/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 头部 -->
		<div style="width: 100%;">
				<div class="container-fluid">
					<div class="row" style="">
						<div class="col-lg-3 col-12 ">
							<div style="line-height: 100px;" class="text-lg-right text-center">
								<img src="img/logo-header-06.png" />
							</div>
						</div>
		
						<div class="col-lg-5 col-12 pb-2  mt-lg-4 pt-lg-2" style="">
							<div class="rounded-pill border w-100" style="">
								<div class="row ">
									<div class="col-3 d-lg-block d-none pr-0 ">
										<div class="text-center" style="border-right:1px solid gainsboro ;">
											<a href="#" class=" dropdown-toggle nav-link text-white z-aa p-0" data-toggle='dropdown'>MOVIES</a>
											<div class="dropdown-menu " style="">
												<a href="#" class="dropdown-item " style="color:#e40914 !important;
		border-bottom: 1px solid dimgrey;width: 75%;margin: 0 auto;padding-bottom: 10px;">Movies</a>
												<a href="#" class="dropdown-item xia-aa my-2">Videos</a>
												<a href="#" class="dropdown-item xia-aa my-2">Categories</a>
												<a href="#" class="dropdown-item xia-aa my-2">Popular</a>
											</div>
										</div>
									</div>
									<div class="col-lg-9 col-12 pl-sm-0">
										<form class="form-control rounded-pill border-0" style="height: 40px;">
											<input type="text" placeholder="Search for a Movie..." class="border-0" style="outline: none; " />
											<button class="btn fa fa-search rounded " style="float: right;color: #5a646d;"></button>
										</form>
									</div>
								</div>
							</div>
		
						</div>
		
						<div class="col-4 d-lg-block d-none ">
							<div class="d-flex flex-wrap align-items-center" style="height: 100px;">
								<a href="#" class="a1 border-0">
									<div class="rounded-circle mx-1 rc " style="width:40px;height: 40px; position: relative;">
										<i class="fa fa-facebook fa-1x aa1 mx-auto" style="position: absolute;left: 14px;top: 12px;"></i>
									</div>
								</a>
								<a href="#" class="a1 border-0">
									<div class="rounded-circle mx-1 rc " style="width:40px;height: 40px; position: relative;">
										<i class="fa fa-twitter fa-1x aa1 mx-auto" style="position: absolute;left: 11px;top: 12px;"></i>
									</div>
								</a>
								<a href="#" class="a1 border-0">
									<div class="rounded-circle mx-1 rc " style="width:40px;height: 40px; position: relative;">
										<i class="fa fa-pinterest-p fa-1x aa1 mx-auto" style="position: absolute;left: 13px;top: 12px;"></i>
									</div>
								</a>
								<a href="#" class="a1 border-0">
									<div class="rounded-circle mx-1 rc" style="width:40px;height: 40px; position: relative;">
										<i class="fa fa-linkedin fa-1x aa1 mx-auto" style="position: absolute;left: 12px;top: 10px;"></i>
									</div>
								</a>
								<a href="#"><button type="button" class="btn px-4 ml-2 tbtn rounded-pill">READ MORE</button></a>
							</div>
						</div>
					</div>
				</div>
			</div>
		<!-- 导航栏 -->
		<div class="container-fluid p-0" style="background-color: #111111;">
			<div class="container">
				<div class="navbar navbar-expand-lg navbar-dark p-0 ">
					<button class="navbar-toggler my-2 mx-2" data-toggle="collapse" data-target="#num">
						<i class="fa fa-bars" style="color: white;"></i>
					</button>
		
					<div class="collapse navbar-collapse" id="num">
						<ul class="navbar-nav">
							<li class="nav-item  mx-1 d-md-block d-none">
								<button class="btn my-2 mx-2 mr-auto">
									<i class="fa fa-bars" style="color: white;"></i>
								</button>
							</li>
							<li class="nav-item  mx-1">
								<a href="index.html" class="nav-link z-a text-white default px-3" style="line-height: 40px;font-weight: 600;">HOME</a>
							</li>
		
							<li class="nav-item mx-1 dropdown ">
								<a href="#" class="nav-link text-white px-3 z-a" style="line-height: 40px;font-weight: 600;" data-toggle='dropdown'>MOVIE</a>
								<div class="dropdown-menu" style="background-color: #1e1e1e;">
									<a href="shop.html" class="dropdown-item xia-a">Shop</a>
									<a href="shop_details.html" class="dropdown-item xia-a">Shop_details</a>
								</div>
							</li>
		
							<li class="nav-item mx-1 dropdown ">
								<a href="#" class="nav-link text-white px-3 z-a" style="line-height: 40px;font-weight: 600;" data-toggle='dropdown'>VIDEO</a>
								<div class="dropdown-menu" style="background-color: #1e1e1e;">
									<a href="video.html" class="dropdown-item xia-a">Video</a>
									<a href="video_details.html" class="dropdown-item xia-a">Video_details</a>
								</div>
							</li>
		
							<li class="nav-item mx-1 dropdown ">
								<a href="#" class="nav-link text-white px-3 z-a" style="line-height: 40px;font-weight: 600;" data-toggle='dropdown'>FEATURES</a>
								<div class="dropdown-menu" style="background-color: #1e1e1e;">
									<a href="about.html" class="dropdown-item xia-a">About </a>
									<a href="submit.html" class="dropdown-item xia-a">Submit</a>
									<a href="list_authors.html" class="dropdown-item xia-a">List_authors</a>
									<a href="authors_details.html" class="dropdown-item xia-a">Authors_details</a>
								</div>
							</li>
		
							<li class="nav-item mx-1 dropdown ">
								<a href="#" class="nav-link text-white px-3 z-a" style="line-height: 40px;font-weight: 600;" data-toggle='dropdown'>BLOG</a>
								<div class="dropdown-menu" style="background-color: #1e1e1e;">
									<a href="blog.html" class="dropdown-item xia-a">Blog </a>
									<a href="blog_detail.html" class="dropdown-item xia-a">Blog_detail</a>
								</div>
							</li>
		
							<li class="nav-item mx-1 ">
								<a href="contact.html" class="nav-link text-white px-3 z-a" style="line-height: 40px;font-weight: 600;">CONTENT</a>
							</li>
						</ul>
					</div>
					<div class="">
						<p class="text-white mt-3" style="display: inline;">
							<span class="fa fa-user mr-2"></span>
							WELCOME GUEST! <span style="color: #b30e12;">LOGIN</span></p>
					</div>
				</div>
			</div>
		</div>
		<!-- 导航栏下 -->
		<div style="background-image: url(img/bg-page-title-01.jpg); width: 100%;">
			<div style="background-color: rgba(8,8,8,0.5); height: 183px;">
				<p style="color: white;text-align: center;font-size: 30px; padding-top: 50px;" class="m-0">Shop</p>
				<p style="color: white;text-align: center;">Home / <span style="color: #b30e12;">Shop</span> </p>
			</div>
		</div>

		<!-- 中部网格 -->
		<div class="container mt-5 pt-4">
			<!-- 左边 --><div class="row">
			<div class="col-lg-9 col-12">
				
				<!-- 1 -->
				<div class="row"id="app">
					<!-- 左边 -->
					<div class="col-lg-5 col-12 mt-2">
						<div style="overflow: hidden;"><a href="javascript:void(0)">
							<img :src="img1" class="w-100 img1" /></a></div>
						<div class="row mt-3">
							<div class="col-4">
								<div style="overflow: hidden;"><a href="javascript:void(0)">
								<img src="img/product-thumb-01.jpg"@click="fun1" class="w-100 img2" /> </a></div></div>
							<div class="col-4"><div style="overflow: hidden;"><a href="javascript:void(0)"><img src="img/product-thumb-02.jpg"@click="fun2" class="w-100 img2" /> </a></div></div>
							<div class="col-4"><div style="overflow: hidden;"><a href="javascript:void(0)"><img src="img/product-thumb-03.jpg"@click="fun3" class="w-100 img2" /> </a></div></div>
						</div>
					</div>
					<!-- 右边 -->
					<div class="col-lg-7 col-12 mt-sm-2 mt-4">
						<h3 style="font-weight: 600;">Captain America</h3>
						<i class="fa fa-star text-warning"></i>
						<i class="fa fa-star text-warning"></i>
						<i class="fa fa-star text-warning"></i>
						<i class="fa fa-star text-warning"></i>
						<i class="fa fa-star text-warning"></i>
						<i class="fa fa-star text-warning"></i>
						<i class="fa fa-star text-warning"></i>
						<i class="fa fa-star-o text-warning"></i>
						<i class="fa fa-star-o text-warning"></i>
						<i class="fa fa-star-o text-warning"></i>
						<p style="display: initial;color: #747474;">7/10</p>
						<p style="color: #e40a1b;font-size: 24px;font-weight: 600;" class="my-4"><i style="color: #747474;font-size: 14px;text-decoration: line-through;"class="mr-1">￡9.00</i>￡7.00</p>
						<p class="" style="color: #747474;">Aldus PageMaker including versions of Lorem lpsum. lt was popularised in the
							1960s with the release of Letraset sheets containing Lorem lpsum passages, andmore recently with desktop publishing software likeAldus
							PageMaker including versions
						</p>
						<div class="btn-group my-3">
							<h6 class="mr-3 my-auto"style="font-weight: 600;">Quanlity:</h6>
							<div class="border">
							<button class="btn border-0 px-3 "@click="num--"v-bind:disabled="num==0"><b>-</b></button>
							{{num}}
							<button class="btn border-0 px-3 "@click="num++"><b>+</b></button>
							</div>
						</div>
						<br />
						<a href="#"style="font-weight: 600;"><button type="button" class="mt-3 btn px-5 tbtn rounded-pill">ADD TO CART</button></a>
						<p class="mt-4"style="font-weight: 600;">Categories:  <a href="#" style="color:#FC5A6D;text-decoration: none;font-weight: 500;">Documentaries,Drama</a></p>
					</div>
				</div>

				<!-- 卡片 -->
				<div class="mt-5">
					<ul class="nav border-0">
						<li class="nav-item list">
							<a href="#one" class="nav-link p-0 active border-0 card-a " data-toggle="tab">Description</a>
						</li>
						<li class="nav-item"><p class="ml-3 "style="color:#747474;"><b>·</b></p></li>
						<li class="nav-item list">
							<a href="#two" class="nav-link p-0 border-0 mx-4 card-a" data-toggle="tab">Reviems(0)</a>
						</li>
						<li class="nav-item "><p class="mr-3"style="color:#747474;"><b>·</b></p></li>
						<li class="nav-item list">
							<a href="#three" class="nav-link p-0 border-0 card-a" data-toggle="tab">Trailer</a>
						</li>
					
						<div class="tab-content border-top">
							<!-- 第一个 -->
							<div class="tab-pane active" id="one">
								<p class="mt-3 pr-2"style="color:#747474;line-height: 30px;">Lorem lpsum is simply dummy text of the printing and typesetting industry.Lorem lpsum has been thaindustry's standard dummy text ever since the l500s, when an unknown printer took a galley of type andscrambled it to make a type specimen book. It has survived not only five centuries, but also the leap intoelectronic typesetting, remaining essentially unchanged. it was popularised in the 1960s with the releaseof Letraset sheets containing Lorem lpsum passages, and more recently with desktop publishing softwarelike Aldus PageMaker including vevrsions of Lorem Ipsum.It was popularised in the 1960s with the releaseof Letraset sheets containing Lorem lpsum passages</p>
							</div>
							<!-- 第二个 -->
							<div class="tab-pane fade" id="two">
								<p class="mt-3"style="color:#747474 ;">Aldus PageMaker including versions of Lorem lpsum. lt was popularised in the
							1960s with the release of Aldus PageMaker including versions of Lorem lpsum. ltwas popularised in the 1960s with
							the release of
							Letraset sheets containing Lorem lpsum passages, andmore recently with desktop publishing software likeAldus
							PageMaker including versions</p>
							</div>
							<div class="tab-pane fade" id="three">
								<p class="mt-3"style="color:#747474 ;">Lorem lpsum is simply dummy text of the printing and typesetting industry.Lorem lpsum has been thaindustry's standard dummy text ever since the l500s, when an unknown printer took a galley of type andscrambled it to make a type specimen book. It has survived not only five centuries, but also the leap intoelectronic typesetting, remaining essentially unchanged. it was popularised in the 1960s with the releaseof Letraset sheets containing Lorem lpsum passages, and more recently with desktop publishing softwarelike Aldus PageMaker including vevrsions of Lorem Ipsum.It was popularised in the 1960s with the releaseof Letraset sheets containing Lorem lpsum passages</p>
							</div>
						</div>
					</ul>
				</div>
				
				<!-- -->
				<h4 class="mt-5"style="font-weight: 600;">Related Products</h4>
				<div class="row mt-4">
					<div class="col-lg-4 col-12 text-center mt-2">
						<div style="overflow: hidden;"class="mx-md-0 mx-5">
							<a href="shop.html">
						<img src="img/product-05.jpg" class="w-100 img1" /></a></div>
						<h6 class="mt-3"style="font-weight: 600;"><a href="#"class="p1">Best Song CD</a></h6>
						<span style="color: #747474;text-decoration: line-through;"><i >￡9.00</i></span>
						<span style="color: #e40a1b;font-weight: 500;">￡7.00</span>
					</div>
					<div class="col-lg-4 col-12 text-center mt-2">
						<div style="overflow: hidden;"class="mx-md-0 mx-5">
							<a href="shop.html">
						<img src="img/product-06.jpg" class="w-100 img1" /></a></div>
						<h6 class="mt-3"style="font-weight: 600;"><a href="#"class="p1">Best Song CD</a></h6>
						<span style="color: #747474;text-decoration: line-through;"><i >￡9.00</i></span>
						<span style="color: #e40a1b;font-weight: 500;">￡7.00</span>
					</div>
					<div class="col-lg-4 col-12 text-center mt-2">
						<div style="overflow: hidden;"class="mx-md-0 mx-5">
							<a href="shop.html">
						<img src="img/product-07.jpg" class="w-100 img1" /></a></div>
						<h6 class="mt-3"style="font-weight: 600;"><a href="#"class="p1">Best Song CD</a></h6>
						<span style="color: #e40a1b;font-weight: 500;">￡7.00</span>
					</div>
				</div>
			</div>
			<!-- 右边 -->
			<div class="col-lg-3 col-12 mb-2 mt-sm-0 mt-5"style="border-left: 1px solid gainsboro;">
				<div class="position-sticky sticky-top">
				<!-- 1. -->
				<span style="border-left: 4px solid red;"></span>
				<h6 style="display: initial;font-weight: 600;" class="ml-3">CATEGORIES</h6>
				<!-- 2.网页 -->
				<div class="row mb-4">
					<div class="col-12 dropright mt-2">
						<a href="#"class="left-a">
							<span class="dropdown-toggle a-xl" style=""></span>
							<span class="ml-2">Film maker</span>
							<span class="a-span">32</span>
						</a>
					</div>
					
					<div class="col-12 dropright mt-2">
						<a href="#"class="left-a">
							<span class="dropdown-toggle a-xl" style=""></span>
							<span class="ml-2">Film studio</span>
							<span class="a-span">32</span>
						</a>
					</div>
					<div class="col-12 dropright mt-2">
						<a href="#"class="left-a">
							<span class="dropdown-toggle a-xl" style=""></span>
							<span class="ml-2">Life style</span>
							<span class="a-span">16</span>
						</a>
					</div>
					<div class="col-12 dropright mt-2">
						<a href="#"class="left-a">
							<span class="dropdown-toggle a-xl" style=""></span>
							<span class="ml-2">Fashion</span>
							<span class="a-span">08</span>
						</a>
					</div>
					<div class="col-12 dropright mt-2">
						<a href="#"class="left-a">
							<span class="dropdown-toggle a-xl" style=""></span>
							<span class="ml-2">Film online</span>
							<span class="a-span">45</span>
						</a>
					</div>
					<div class="col-12 dropright mt-2">
						<a href="#"class="left-a">
							<span class="dropdown-toggle a-xl" style=""></span>
							<span class="ml-2">Film studio</span>
							<span class="a-span">32</span>
						</a>
					</div>
				</div>
				<!-- 3 -->
				<span style="border-left: 4px solid red;"></span>
				<h6 style="display: initial;font-weight: 600;" class="ml-3">MOST POPULAR</h6>
				<!-- 4图片文字 -->
				<div>
					<div class="mt-4">
						<div style="float: left;">
							<div style="overflow: hidden;"class="mr-4 ">
							<a href="#"><img src="img/post-53.jpg" class="img1"></a>
							</div>
						</div>
						<div>
							<a href="#" style="color: #000000;text-decoration: none; display: block;" class="py-md-2 py-2 p1">Mirum est notare
								quam littera...</a>
							<span style="color: #747474;text-decoration: line-through;"><i >￡9.00</i></span>
							<span style="color: #e40a1b;font-weight: 500;">￡7.00</span>
						</div>
					</div>
			
					<div class="mt-5">
						<div style="float: left;">
							<div style="overflow: hidden;"class="mr-4 ">
							<a href="#"><img src="img/post-54.jpg" class="img1"></a>
							</div>
						</div>
						<div>
							<a href="#" style="color: #000000;text-decoration: none; display: block;" class="py-md-2 py-2 p1">What make you
								beautiful with us</a>
							<span style="color: #e40a1b;font-weight: 500;">￡7.00</span>
						</div>
					</div>
			
					<div class="mt-5">
						<div style="float: left;">
							<div style="overflow: hidden;"class="mr-4 ">
							<a href="#"><img src="img/post-55.jpg" class="img1"></a>
							</div>
						</div>
						<div>
							<a href="#" style="color: #000000;text-decoration: none; display: block;" class="py-md-2 py-2 p1">Watch the Sony
								a9 Livestream Event...</a>
							<span style="color: #e40a1b;font-weight: 500;">￡7.00</span>
						</div>
					</div>
				</div>
				<!-- 5 -->
				<div class="mt-5">
				<span style="border-left: 4px solid red;"></span>
				<h6 style="display: initial;font-weight: 600;" class="ml-3">TAGS CLOUD</h6></div>
				<!-- 6.5个按钮 -->
				<div class="mt-3">
					<button class="btn mt-2 r-btn">Film Oline</button>
					<button class="btn mt-2 r-btn">Creative</button>
					<button class="btn mt-2 r-btn">Design</button>
					<button class="btn mt-2 r-btn">Landing</button>
					<button class="btn mt-2 r-btn">Skill</button>
				</div>
				<!-- 7.照片定位按钮 -->
				<div class="row mt-5">
					<div class="col-12"><img src="img/ads-04.jpg"class="w-100"/></div>
				</div>
			</div>
		</div>
		</div>
		</div>
		<!-- 底部 -->
		<div style="width: 100%;background-color: #1c1c1b;margin-top: 70px;" class="mt-5">
			<div class="container">
				<div class="row">
					<!-- 1 -->
					<div class="col-lg-5 col-12 text-center">
						<img src="img/logo-header-05.png" class="mt-5" />
						<p style="color: #747474;" class="mt-4">Loomodo ligula eget dolor.Aenean massa.Cum sociis <br /> que penatibus et
							magnis
							dis parturient montes lorem,<br />nascetur ridiculusmus.Donec quam felis,ultricies nec<br /> massa.Cum sociis...</p>
						<div class="btn-group my-3">
							<input type="text" placeholder="  Email" style="background-color: #1c1c1b;color: #747474; border:1px solid#747474 ;" /><button
							 class="btn "style="background-color: #e40914;color: white;">SUBSCRIBE</button>
						</div>
		
						<div class="d-flex flex-wrap mt-4 justify-content-center">
							<a href="#" class="a1">
								<div class="rounded-circle mx-1 rcc" style="width:40px;height: 40px; position: relative;">
									<i class="fa fa-facebook fa-1x aa1 mx-auto" style="position: absolute;left: 14px;top: 11px;"></i>
								</div>
							</a>
							<a href="#" class="a1 border-0">
								<div class="rounded-circle mx-1 rcc" style="width:40px;height: 40px; position: relative;">
									<i class="fa fa-twitter fa-1x aa1 mx-auto" style="position: absolute;left: 12px;top: 11px;"></i>
								</div>
							</a>
							<a href="#" class="a1 border-0">
								<div class="rounded-circle mx-1 rcc" style="width:40px;height: 40px; position: relative;">
									<i class="fa fa-vimeo fa-1x aa1 mx-auto" style="position: absolute;left: 11px;top: 11px;"></i>
								</div>
							</a>
							<a href="#" class="a1 border-0">
								<div class="rounded-circle mx-1 rcc" style="width:40px;height: 40px; position: relative;">
									<i class="fa fa-youtube-play fa-1x aa1 mx-auto" style="position: absolute;left: 11px;top: 11px;"></i>
								</div>
							</a>
							<a href="#" class="a1 border-0">
								<div class="rounded-circle mx-1 rcc" style="width:40px;height: 40px; position: relative;">
									<i class="fa fa-google-plus fa-1x aa1 mx-auto" style="position: absolute;left: 11px;top: 11px;"></i>
								</div>
							</a>
							<a href="#" class="a1 border-0">
								<div class="rounded-circle mx-1 rcc" style="width:40px;height: 40px; position: relative;">
									<i class="fa fa-instagram fa-1x aa1 mx-auto" style="position: absolute;left: 12px;top: 11px;"></i>
								</div>
							</a>
						</div>
					</div>
					<!-- 2 -->
					<div class="col-lg-4 col-12">
						<p style="color: white;" class="mt-5"><b> LATEST POSTS</b></p>
		
						<div class="row">
							<div class="col-4 mt-1">
								<div style="overflow: hidden;"><a href="#">
									<img src="img/png-post-01.png" class="img1"></a></div>
							</div>
							<div class="col-8 pl-md-3 pl-0">
								<p style="color: white;" class="m-0 mb-2"><a href="#"class="b-p">5 Skin Care Rituals You Should  Be Doing Before Bed</a></p><span
								 style="color:#747474 ;font-size: 14px;">August
									11,2018</span>
							</div>
								</div>
								
								<div class="row mt-3">
							<div class="col-4 mt-1">
								<div style="overflow: hidden;"><a href="#">
									<img src="img/png-post-02.png" class="img1"></a></div>
							</div>
							<div class="col-8 pl-md-3 pl-0 ">
								<p style="color: white;" class="m-0 mb-2"><a href="#"class="b-p">Fashion Outfit Ideas to Try  From Instagram This Week</a></p><span
								 style="color:#747474 ;font-size: 14px;">August
									11,2018</span>
							</div>
							</div>
							
							<div class="row mt-3">
							<div class="col-4 mt-1">
								<div style="overflow: hidden;"><a href="#">
									<img src="img/png-post-03.png" class="img1"></a></div>
							</div>
							<div class="col-8 pl-md-3 pl-0 ">
								<p style="color: white;" class="m-0 mb-2"><a href="#"class="b-p">7 Soaps to Supercharge Your Daily Skincare Routine</a> </p><span
								 style="color:#747474 ;font-size: 14px;">August
									11,2018</span>
							</div>
						</div>
					</div>
		
					<div class="col-lg-3 col-12 ">
						<p style="color: white;" class="mt-5"><b>POPULAR CATEGORY</b></p>
						<div class="row">
							<div class="col-6">
								<p style="color:#747474 ;" class="m-0"><a href="#"class="b-p2">Fragrances</a></p>
							</div>
							<div class="col-6">
								<p style="color: white;" class="m-0 text-md-center text-right">15</p>
							</div>
							<div class="col-6 my-1">
								<p style="color:#747474 ;" class="m-0"><a href="#"class="b-p2">Hair Care</a></p>
							</div>
							<div class="col-6 my-1">
								<p style="color: white;" class="m-0 text-md-center text-right">12</p>
							</div>
							<div class="col-6 my-1">
								<p style="color:#747474 ;" class="m-0"><a href="#"class="b-p2">Make Up</a></p>
							</div>
							<div class="col-6 my-1">
								<p style="color: white;" class="m-0 text-md-center text-right">6</p>
							</div>
							<div class="col-6 my-1">
								<p style="color:#747474 ;" class="m-0"><a href="#"class="b-p2">Outfits</a></p>
							</div>
							<div class="col-6 my-1">
								<p style="color: white;" class="m-0 text-md-center text-right">9</p>
							</div>
							<div class="col-6 my-1">
								<p style="color:#747474 ;" class="m-0"><a href="#"class="b-p2">Skin Care</a></p>
							</div>
							<div class="col-6 my-1">
								<p style="color: white;" class="m-0 text-md-center text-right">10</p>
							</div>
							<div class="col-6 my-1">
								<p style="color:#747474 ;" class="m-0"><a href="#"class="b-p2">Style</a></p>
							</div>
							<div class="col-6 my-1">
								<p style="color: white;" class="m-0 text-md-center text-right">8</p>
							</div>
							<div class="col-6 my-1">
								<p style="color:#747474 ;" class="m-0"><a href="#"class="b-p2">Fashion</a></p>
							</div>
							<div class="col-6 my-1">
								<p style="color: white;" class="m-0 text-md-center text-right">5</p>
							</div>
							<div class="col-6 my-1">
								<p style="color:#747474 ;" class="m-0"><a href="#"class="b-p2">Lifestyle</a></p>
							</div>
							<div class="col-6 my-1">
								<p style="color: white;" class="m-0 text-md-center text-right">2</p>
							</div>
							<div class="col-6 my-1">
								<p style="color:#747474 ;" class="m-0"><a href="#"class="b-p2">Wellness</a></p>
							</div>
							<div class="col-6 my-1">
								<p style="color: white;" class="m-0 text-md-center text-right">3</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<hr />
			<p style="color:#747474; text-align: center;" class="px-3 py-2 m-0">Copyright 2018 Corporate WordPress Theme by
				<span style="color: #c6161c;">ThimPress</span></p>
		</div>
	<!-- 返回顶部 -->
			<a href="javascript:void(0)"><img src="img/gotop.jpg" id="top" /></a>
		</body>
	</html>
	<script type="text/javascript"src="js/index.js"charset="utf-8"></script>
<script type="text/javascript">
	var app=new Vue({
		el:'#app',
		data:{
			num:1,
			img1:'img/single-product-01.jpg'
		},
		methods:{
			fun1:function(){
				this.img1='img/single-product-01.jpg'
			},
			fun2:function(){
				this.img1='img/single-product-02.jpg'
			},
			fun3:function(){
				this.img1='img/single-product-03.jpg'
			},
		}
	})
</script>